import React, { Component } from 'react'
import tabbar_config from "../../config/tabbar.config"
import "./style.scss"
import { BrowserRouter as Router, Routes, Redirect, Route, Link } from "react-router-dom"

// import { useHistory } from 'react-router-dom'
class MyTabBar extends Component {
    constructor(props) {
        super(props)
    }
    state = {
        activePath: ''
    }

    //组件挂载时触发
    componentWillMount() {

    }

    //组件完成挂载触发
    componentDidMount() {
        const urlParams = new URL(window.location.href)
        console.log(urlParams.pathname);
        this.setState({
            activePath: urlParams.pathname
        })
    }

    //组件是否要更新数据时触发
    // shouldComponentUpdate() {

    // }

    //组件将要更新数据时触发
    componentWillUpdate() {

    }

    //组件更新数据完成时触发
    componentDidUpdate() {

    }

    //组件销毁时触发
    componentWillUnmount() {

    }

    // 单机切换tabbar
    clickTab = (index, path) => {
        // console.log(path);
        this.setState({
            activePath: path
        })
        // useHistory().push({ pathname: path })
        // console.log(useHistory());
    }

    render() {
        return (
            <div>
                {/* tabbar组件功能 */}
                <div className="tabbar">
                    <Redirect to="/me" ></Redirect>
                    {
                        tabbar_config.map((item, index) => {
                            return <Link className="link" to={item.path} key={index} >
                                <div
                                    className={item.path == this.state.activePath ? 'active tabbar_item' : 'tabbar_item'}
                                    key={index}
                                    onClick={this.clickTab.bind(this, index, item.path)}
                                >
                                    <i className="icon">{item.icon}</i>
                                    <div className="title">{item.title}</div>
                                </div>
                            </Link>
                        }
                        )
                    }
                </div>
            </div>
        )
    }
}
export default MyTabBar